<template>
  <div>
    <section>
      <h2>Stars</h2>
      <div class="star1 star"></div>
      <div class="star2 star"></div>
      <div class="star3 star"></div>
      <div class="star4 star"></div>
      <div class="star5 star"></div>
      <div class="star6 star"></div>
      <div class="star7 star"></div>
      <div class="star8 star"></div>
    </section>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@mixin flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000200;
  @include flex-center-center;
}
section h2 {
  color: transparent;
  font-weight: 900;
  font-size: 14em;
  -webkit-text-stroke: 2px #ffffff; 
  text-transform: uppercase;
}
section .star {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: animate 8s ease-in-out infinite, backgroundmove 16s linear infinite;
}
section .star.star1 {
  animation-delay: 0s;
  background: url('../assets/img/start/star1.png');
}
section .star.star2 {
  animation-delay: -1s;
  background: url('../assets/img/start/star2.png');
}
section .star.star3 {
  animation-delay: -2s;
  background: url('../assets/img/start/star3.png');
}
section .star.star4 {
  animation-delay: -3s;
  background: url('../assets/img/start/star4.png');
}
section .star.star5 {
  animation-delay: -4s;
  background: url('../assets/img/start/star5.png');
}
section .star.star6 {
  animation-delay: -5s;
  background: url('../assets/img/start/star6.png');
}
section .star.star7 {
  animation-delay: -6s;
  background: url('../assets/img/start/star7.png');
}
// section .star.star8 {
//   animation-delay: -7s;
//   background: url(https://raw.githubusercontent.com/pleiades-embers/images/master/star8.png);
// }

@keyframes animate {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    opacity: 0;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    opacity: 1;
  }
}

@keyframes backgroundmove {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(2)
  }
}
</style>